<!--
 * @Date: 2022-06-15 09:27:31
 * @Author: 陶子
 * @LastEditTime: 2022-06-16 14:21:25
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\warehouseManagement\goodsManagement\SearchTag.vue
 * @pageName: 这是--(物品管理——筛选)--页面
-->
<template>
  <div class="search-content wrap-apply" :style="{top: GLOBAL.currentEnvironment ? '0' : ''}" v-show="showSearchTag">
    <Search ref="topSearch" class="search" placeholder="物品名称 | 物品编号 | 规格" :isAdd="false" :isScreen="false" :isType="false"></Search>
    <div class="searchBox">
      <van-cell-group style="margin-top:0.1rem">
        <p class="label FormTit"><span></span>物品编号</p>
        <van-field v-model="filterForm.goodsCode" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>物品名称</p>
        <van-field v-model="filterForm.goodsName" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>物品分类</p>
        <van-field readonly v-model="filterForm.categoryText" placeholder="请选择" @click="showTree = true">
        </van-field>
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>物品类型</p>
        <van-field-checkbox :supportClear='true' label="" placeholder="请选择" v-model="type" :columns="goodTypeList" label-width="100"
          :option="{label:'text',value:'value'}" @confirm='processSelectConfirm("type",$event)' />
        <div class="bottomLine"></div>
      </van-cell-group>
    </div>
    <div class="search-bottom">
      <span class="btncancel" @click="btnCancel">重置</span>
      <span class="btnconfirm" @click="btnConfirm">确定</span>
    </div>
    <van-popup v-model="showTree" position="bottom">
      <div class="van-picker__toolbar">
        <button type="button" class="van-picker__cancel" @click="confirmTree">取消</button>
        <button type="button" class="van-picker__confirm" @click="confirmTree">确认</button>
      </div>
      <van-tree-select :items="categoryList" :active-id="filterForm.category" :main-active-index.sync="activeIndex" @click-item="clickItem" />
    </van-popup>
  </div>
</template>

<script>
const formP = {
  applicantId: "",
  operatorId: "",
  applyTimeBegin: "",
  applyTimeEnd: "",
};
import VanFieldCheckbox from "@/components/ActionSheet/VanFieldCheckbox";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import upload from "@/components/upload/upload";
import VanFieldSelectPicker from "@/components/ActionSheet/VanFieldSelectPicker";
import Search from "@/components/search";
export default {
  name: "search",
  components: {
    ContactPickers,
    upload,
    Search,
    VanFieldSelectPicker,
    VanFieldCheckbox,
  },
  data() {
    return {
      activeIndex: 0,
      showTree: false,
      goodTypeList: [],
      categoryList: [],
      showSearchTag: false,
      /***** */
      filterForm: {
        goodsCode: "",
        goodsName: "",
        type: "",
        category: "",
        categoryText: "",
        keyword: "",
      },
      type: [],
      stackStateList: [
        {
          text: "已生效",
          value: "effective",
        },
        {
          text: "未生效",
          value: "no_effective",
        },
      ],
    };
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {
    confirmTree() {
      this.showTree = false;
    },
    clickItem(v) {
      this.filterForm.categoryText = v.text;
      this.filterForm.category = v.id;
    },
    showModal(keyword, dropdownObj, goodTypeList, categoryList, activeIndex) {
      this.showSearchTag = true;
      this.$nextTick(() => {
        this.$refs.topSearch.value = keyword;
        this.filterForm = JSON.parse(JSON.stringify(dropdownObj));
        this.type = this.filterForm.type ? this.filterForm.type.split(",") : [];
        this.goodTypeList = goodTypeList;
        this.categoryList = categoryList;
        this.activeIndex = activeIndex;
      });
    },

    processSelectConfirm(arrType, proceArr) {
      if (proceArr) {
        this[arrType] = proceArr;
      } else {
        this[arrType] = [];
      }
    },
    btnCancel() {
      this.$refs.topSearch.value = "";
      this.filterForm = {
        goodsCode: "",
        goodsName: "",
        type: "",
        category: "",
        categoryText: "",
        keyword: "",
      };
      this.type = [];
      this.activeIndex = 0;
    },
    btnConfirm() {
      this.filterForm.type = this.type.join(",");
      let sureObj = {
        ...this.filterForm,
        keyword: this.$refs.topSearch.value,
      };
      this.showSearchTag = false;
      this.$emit("getCategory", sureObj);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
.search-content {
  //  padding-bottom: 0.5rem;
  position: fixed;
  top: 0.35rem;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  z-index: 99;
  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
  .search-bottom {
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0.06rem 0.11rem;
    font-size: 0.16rem;
    font-weight: 500;
    .btncancel {
      flex: 1;
      background: #f6f6f6;
      // border: 0.01rem solid rgba(25, 31, 37, 0.12);
      box-sizing: border-box;
      height: 0.39rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.03rem;
      margin-right: 0.11rem;
      color: #191f25;
    }
    .btnconfirm {
      flex: 1;
      background: #1890ff;
      box-sizing: border-box;
      height: 0.39rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.03rem;
      color: #ffffff;
    }
  }
}
.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0 0.16rem;
}
.searchBox {
  height: calc(100vh - 1.6rem);
  overflow-y: auto;
}
.haveUnitBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-right: 0.16rem;
  /deep/ .van-cell {
    padding-right: 0;
    width: 2.6rem;
  }
  /deep/ .van-field__control {
    max-width: 3rem;
  }
}
</style>